<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>

<body>
    <div class="layui-form layuimini-form">
        <!-- 传递role的值到后端 -->
        <input type="hidden" name="role">
        <div class="layui-form-item">
            <label class="layui-form-label required">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" lay-reqtext="不能为空" placeholder="请输入员工姓名" value=""
                    class="layui-input">
                <tip>填写员工姓名</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" value="男" title="男">
                <input type="radio" name="gender" value="女" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">账号</label>
            <div class="layui-input-block">
                <input type="text" name="username" lay-verify="required" lay-reqtext="不能为空" placeholder="请输入账号" value=""
                    id="reg" class="layui-input">
                <tip>为员工设置账号</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">密码</label>
            <div class="layui-input-block">
                <input type="text" name="password" lay-verify="required" lay-reqtext="不能为空" placeholder="请输入密码" value=""
                    class="layui-input">
                <tip>为员工设置密码</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">联系电话</label>
            <div class="layui-input-block">
                <input type="number" name="mobile" lay-verify="required" lay-reqtext="不能为空" placeholder="请填写联系电话"
                    value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" id="show">
            <label class="layui-form-label">管理学校</label>
            <div class="layui-input-block" id="school">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认修改</button>
            </div>
        </div>
    </div>
    <script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="../../js/lay-config.js?v=2.0.0" charset="utf-8"></script>
    <script>
        layui.use(['form', 'cookie'], function () {

            var form = layui.form,
                layer = layui.layer,
                $ = layui.$,
                cookie = layui.cookie;
            //  // 获取对应行的id
            var sid = $.cookie("staff_id");
            // 加载输入框初始值
            $(function () {
                var that = $("input");
                $.post("/staff/search", {
                    "id": sid
                }, function (data) {
                    var data = data.data[0];
                    $(that[0]).val(data.role);
                    $(that[1]).val(data.name);
                    var index = (data.gender == "男") ? 2 : 3;
                    $(that[index]).prop("checked", true);
                    layui.form.render();
                    $(that[4]).val(data.username);
                    $(that[5]).val(data.password);
                    $(that[6]).val(data.mobile);
                    // 渲染多选框
                    // 该员工负责校区
                    if (data.role === 1) {
                        return $("#show").addClass("layui-hide");
                    }
                    var str = data.schools.split(',');
                    $.ajax({
                        url: "/club/school",
                        method: "GET",
                        contentType: "application/json",
                        success: function (data) {
                            var data = data.data;
                            var code=null;
                            // console.log($("#school"))
                            $('#school').empty();
                            // 生成多选框
                            // 遍历所有校区数组
                            for (var i = 0; i < data.length; i++) {
                                // 遍历员工权限数组
                                for (var j = 0; j < str.length; j++) {
                                    // 判断员工管理校区与所有校区重叠的部分
                                    if (str[j]===data[i].s_name) {
                                        code = '<input type="checkbox" name="school" checked value="' +
                                            data[i].s_name + '" title="' + data[i].s_name + '">';
                                            break;
                                    }else {
                                        code = '<input type="checkbox" name="school" value="' +
                                        data[i].s_name + '" title="' + data[i].s_name + '">';
                                    }
                                }
                                // 刷新表单
                                $('#school').append(code);
                            }
                            form.render('checkbox');
                        },
                        error: function (err) {
                            layer.msg("服务器错误，请稍后重试!", {
                                icon: 2
                            });
                        }
                    })
                })
            })
            //监听提交
            form.on('submit(saveBtn)', function (data) {
                var result = data.field;
                result.sid = sid;
                //获取checkbox[name='like']的值
                var arr = new Array();
                $("input:checkbox[name='school']:checked").each(function (i) {
                    arr[i] = $(this).val();
                });
                result.school = arr.join(",");
                result = JSON.stringify(result);
                $.ajax({
                    url: "/staff",
                    method: "PUT",
                    data: result,
                    contentType: "application/json",
                    success: function (data) {
                        layer.msg(data.message, {
                            icon: 1
                        });
                        setTimeout(function() {
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                            parent.location.href = '/page/table-staff.html';
                        },1000)
                    },
                    error: function (err) {
                        layer.msg("服务器错误，请稍后重试!", {
                            icon: 2
                        });
                    }
                })
                return false;
            });
            // 监听员工账号输入，校验是否已存在
            $("#reg").blur(function () {
                var that = $(this);
                if (that.val().length > 0) {
                    var str = {
                        "username": that.val()
                    };
                    str = JSON.stringify(str);
                    $.ajax({
                        url: "/staff/regex",
                        method: "POST",
                        data: str,
                        contentType: "application/json",
                        success: function (data) {
                            if (data.code > 0) {
                                layer.msg("账号已被占用，请输入其他账号!", {
                                    icon: 2
                                });
                                that.val('');
                            }
                        },
                        error: function (err) {
                            layer.msg("服务器错误，请稍后重试!", {
                                icon: 2
                            });
                        }
                    })
                } else {
                    layer.msg("账号不能为空!", {
                        icon: 0
                    });
                }
            })

        });
    </script>
</body>

</html>